@extends('owner.base')
@section('content')
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="">
        <ul class="layui-tab-title">
            <li class="layui-this">便捷发送短信</li>
        </ul>
        <div class="layui-card layui-tab-content" style="">
            <div class="layui-card-body layui-tab-item layui-show">

                <div class="layui-form-item">
                    <label for="" class="layui-form-label">选择手机号</label>
                    <a class="layui-btn layui-btn-radius layui-btn-normal" href="{{route('owner.driver.sendmail')}}">
                        <i class="layui-icon">&#xe602;</i> 从通讯录发送
                    </a>

                </div>
                <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>


                <div class="layui-form-item">
                    <label for="" class="layui-form-label">群发内容</label>
                    <div class="layui-input-block">
                            <textarea id="msg" class="layui-textarea" name="description" cols="30" rows="3"
                            ></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="sendMsg" lay-filter="formDemo">发 送</button>
                    </div>
                </div>
                <input type="hidden" id="data-form"></input>
            </div>

        </div>
    </div>

@endsection

@section('script')

    <script>
        layui.use(['treeTable', 'layer', 'code', 'form'], function () {
            var o = layui.$,
                form = layui.form,
                layer = layui.layer,
                treeTable = layui.treeTable;
            var re = treeTable.render({
                elem: '#tree-table',
                data: getData(),
                icon_key: 'title',
                is_checkbox: true,
                treeDefaultClose: false,//默认折叠
                treeSpid: 0,
                treePidName: 'pid',
                width: 100,
                height: 200,
                checked: {
                    key: 'id',
                    //data: [0, 1, 4, 10, 11, 5, 2, 6, 7, 3, 8, 9],
                },
                end: function (e) {
                    form.render();
                },
                cols: [

                    {
                        key: 'title',
                        title: '标签名称',
                        width: '100px',
                        template: function (item) {
                            if (item.level == 0) {
                                return '<span style="color:red;">' + item.title + '</span>';
                            } else if (item.level == 1) {
                                return '<span style="color:green;">' + item.title + '</span>';
                            } else if (item.level == 2) {
                                return '<span style="color:#aaa;">' + item.title + '</span>';
                            }
                        }
                    },


                ],

                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                },

            });
            //删除所有的二级前面的复选框
            $("tr").each(function (obj) {
                if (o(this).attr("data-pid") != 0) {
                    o(this).find("td").eq(0).find("div").remove();
                }
            })
            //页面一加载就去掉全选框
            console.log($(".layui-form thead tr").attr("data-id", 0).find("div").remove());


            // 监听展开关闭
            treeTable.on('tree(flex)', function (data) {
                //layer.msg('zheli3' + JSON.stringify(data));
                //console.log(o(data.elem).parents("tr").find("td").eq(0).find("div").remove());
            })
            // 监听checkbox选择
            treeTable.on('tree(box)', function (data) {
                if ($(".layui-form-checked").length > 1) {
                    //layer.msg('只能选择一个标签');
                    $(".layui-form-checked").removeClass("layui-form-checked")
                    o(this).addClass("layui-form-checked");
                }

            })
            // 监听自定义
            treeTable.on('tree(add)', function (data) {
                layer.msg('zheli2'.JSON.stringify(data));
            })
            // 获取选中值，返回值是一个数组（定义的primary_key参数集合）
            o('.get-checked').click(function () {
                layer.msg('选中参数' + treeTable.checked(re).join(','))
            })
            // 刷新重载树表（一般在异步处理数据后刷新显示）
            o('.refresh').click(function () {
                re.data.push({"id": 50, "pid": 0, "title": "1-4"}, {"id": 51, "pid": 50, "title": "1-4-1"});
                treeTable.render(re);
            })

            o('#tree1').on('click', '[data-down]', function () {
                o(this).find('span').length && o(this).parents('.layui-unselect').find('input').val(o(this).text());
            })
            o('.layui-select-title').click(function () {
                o(this).parent().hasClass('layui-form-selected') ? o(this).next().hide() : o(this).next().show(), o(this).parent().toggleClass('layui-form-selected');
            })
            o(document).on("click", function (i) {
                !o(i.target).parent().hasClass('layui-select-title') && !o(i.target).parents('table').length && !(!o(i.target).parents('table').length && o(i.target).hasClass('layui-icon')) && o(".layui-form-select").removeClass("layui-form-selected").find('.layui-anim').hide();
            })

        })

        function getData() {
            var data = [];
            $.ajax({
                url: "{{route('owner.driver.getdrivermail')}}",    //后台数据请求地址
                type: "get",
                async: false,
                success: function (resut) {
                    data = $.parseJSON(resut);
                    if (data.length == 0) {
                        $("#tree-table").remove();
                    }

                }
            });
            return data;

        }

        $("#sendMsg").on('click', function () {
            //判断是否选中
            var ids = []
            $(".layui-form-checked").each(function () {
                ids.push($(this).parents("tr").attr("data-id"));
            });

            if (ids.length <= 0) {
                layer.msg("请选择标签", {icon: 5});
                return false;
            }
            //查询标签下的所有手机号，并发送短信
            $.post('{{route('owner.driver.sendlabel')}}', {
                'ids': ids,
                'msg': $("#msg").val()
            }, function (dataforjson) {
                layer.msg(dataforjson.msg, {icon: 6});
            }, 'json');
        });


    </script>



@endsection()

